<script>
export default {
    name: "TreeItem",
    props: ["model"],
    computed: {
        hasChild() {
            return this.model.children && this.model.children.length > 0;
        },
    },
    data() {
        return {
            show: false,
        }
    }
};
</script>

<template>
    <li>
        <div @click="show = !show">{{ model.name }}
            <span v-if="hasChild">[{{ show ? '-' : '+' }}]</span>
        </div>
    </li>
    <ul v-show="show" v-if="hasChild">
        <TreeItem v-for="item in model.children" :model="item" />
    </ul>
</template>